<template>
  <van-calendar
    v-model:show="curComp.config.isActive"
    :default-date="defaultDate"
    :color="attrs.color"
    :title="attrs.title"
    :row-height="attrs.rowHeight"
    :show-title="attrs.showTitle"
    :show-subtitle="attrs.showSubtitle"
    :type="attrs.mode"
    @closed="curComp.config.isActive = false"
    @confirm="curComp.config.isActive = false"
  />
</template>
<script setup lang='ts'>
import { useAttrs } from 'generator/hooks'
import { ref, watch } from 'vue';

const props = defineProps<{
  panelJson: TPanel
  curComp: TComp
}>()

const attrs = useAttrs(props.curComp.attrs)

const defaultDate = ref<Date | Date[] | null | undefined>(new Date())

watch(() => attrs.value.mode, () => {
  if(attrs.value.mode === 'single') {
    defaultDate.value = new Date()
  } else {
    defaultDate.value = null
  }
}, { deep: true })
</script>
<style scoped>
.wft-w-h-100 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
</style>